import * as echarts from 'echarts/core';
import { PictorialBarChart } from 'echarts/charts';
import data from '@/component/x6-tree/data';
echarts.use([PictorialBarChart]);
var dataList = [
  { name: '系列一', expect: 10, reality: 5 },
  { name: '系列二', expect: 15, reality: 27 },
  { name: '系列三', expect: 10, reality: 27 },
  { name: '系列四', expect: 15, reality: 27 },
  { name: '系列五', expect: 10, reality: -5 },
];
// 头部数据
let topData = dataList.map((item) => {
  return {
    name: '',
    value: item.reality < 0 ? 0 : item.reality,
    symbolPosition: 'end',
  };
});
// 底部立体柱子
let bottomBar = dataList.map((item) => {
  return {
    value:
      item.reality < 0
        ? -3
        : item.reality > item.expect
        ? item.expect
        : item.reality,
  };
});
// 底下圆片
let bottomCircle = dataList.map((item) => {
  if (item.reality < 0) {
    return {
      name: '',
      value: -3,
      symbolPosition: 'end',
    };
  }
  return {
    name: '',
    value: item.reality,
  };
});
// 中间圆片
let middleCircle = dataList.map((item) => {
  return { name: '', value: item.expect, symbolPosition: 'end' };
});
// 上边的柱子
let upBar = dataList.map((item) => {
  return {
    name: item.name,
    value:
      item.reality < 0 || item.reality < item.expect
        ? 0
        : item.reality - item.expect,
  };
});

let lineData = dataList.map((item) => {
  return {
    name: item.name,
    value: item.expect,
  };
});

upBar = double(upBar);
bottomCircle = double(bottomCircle);
bottomBar = double(bottomBar);
topData = double(topData);
middleCircle = double(middleCircle);

function double(list: any[]) {
  return list.reduce((p, n) => {
    return [...p, n, n];
  }, []);
}

const option = {
  backgroundColor: '#333333',
  legend: {
    data: ['系列一'],
  },
  grid: {
    // bottom: '10%',
    // top: '35%',
    // right: '0%',
    // left: '0%',
  },
  xAxis: [
    {
      data: [
        '系列一',
        '系列二',
        '系列三',
        '系列四',
        '系列五',
        '系列1',
        '系列2',
        '系列3',
        '系列4',
        '系列5',
        '系列6',
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f42',
          width: 5,
        },
      },
      axisLabel: {
        show: true,
        interval: 0,
        formatter: function (value, index) {
          if (index % 2 === 0) {
            return '';
          }
          return [
            '{a|预计增幅+50.0个百分点}',
            '{b|预计完成7.50亿元}',
            '{x|1}',
          ].join('\n');
        },
        rich: {
          a: {
            color: 'red',
            lineHeight: 10,
          },
          b: {
            backgroundColor: {
              image: 'xxx/xxx.jpg',
            },
            height: 40,
          },
          x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4,
          },
        },
        margin: 10, //刻度标签与轴线之间的距离。
      },
    },
    {
      data: [
        '系列一',
        '系列二',
        '系列三',
        '系列四',
        '系列五',
        '系列1',
        '系列2',
        '系列3',
        '系列4',
        '系列5',
        '系列6',
        '系列7',
      ],
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#f42',
          width: 5,
        },
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: '#fff',
        },
        margin: 30, //刻度标签与轴线之间的距离。
      },
    },
    {
      data: [
        '系列一',
        '系列二',
        '系列三',
        '系列四',
        '系列五',
        '系列1',
        '系列2',
        '系列3',
        '系列4',
        '系列5',
        '系列6',
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        formatter: function (value, index) {
          if (index % 2 === 0) {
            return '';
          }
          return [`{a|${value}}`].join('\n');
        },
        rich: {
          a: {
            color: 'red',
            lineHeight: 10,
          },
        },
        margin: 0, //刻度标签与轴线之间的距离。
      },
    },
  ],
  yAxis: [
    {
      max: 30,
      min: -5,
      interval: 5,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          dashOffset: 4,
          color: [
            '#ddd',
            '#ddd',
            '#ddd',
            '#ddd',
            '#ddd',
            '#ddd',
            '#ddd',
            'transparent',
          ],
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        onZero: false,
        show: false,
      },
      axisLabel: {
        show: true,
        formatter: (value) => {
          if (value === 25) {
            return '超比例尺上线部分';
          }
          if (value === -5) {
            return '负增长%';
          }
          if ([5, 15, 30].includes(value)) {
            return '';
          }
          return value;
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: [
            'red',
            'transparent',
            'transparent',
            'transparent',
            'transparent',
            'green',
            'transparent',
          ],
          opacity: 0.2,
        },
      },
    },
  ],
  series: [
    // 头
    {
      name: '',
      type: 'pictorialBar',
      barWidth: '100%',
      symbolSize: ['100%', 20],
      symbolOffset: [0, -8],
      z: 12,
      itemStyle: {
        normal: {
          color: function (params) {
            const { dataIndex } = params;
            if (dataIndex % 2 === 0) {
              return 'transparent';
            }
            const { expect, reality } = dataList[Math.floor(dataIndex / 2)];
            return new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: reality > expect ? 'rgba(54,127,223,1)' : 'red',
                },
                {
                  offset: 1,
                  color: reality > expect ? 'rgba(94,162,254,1)' : 'red',
                },
              ],
              false,
            );
          },
        },
      },
      data: topData,
    },
    //底部立体柱
    {
      stack: '1',
      type: 'bar',
      silent: true,
      barWidth: '100%',
      barCategoryGap: 0,
      data: bottomBar,
      itemStyle: {
        normal: {
          color: function (params: any) {
            const { dataIndex } = params;
            if (dataIndex % 2 === 0) {
              return 'transparent';
            }
            const { expect, reality } = dataList[Math.floor(dataIndex / 2)];
            return {
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              type: 'linear',
              global: false,
              colorStops: [
                {
                  offset: 0,
                  color: '#0888E5', // 0% 处的颜色
                },
                {
                  offset: 0.62,
                  color: '#0A72BD', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0888E5', // 100% 处的颜色
                },
              ],
            };
          },
        },
      },
    },
    //最底下的圆片
    {
      name: '',
      type: 'pictorialBar',
      barWidth: '100%',
      symbolSize: ['100%', 20],
      symbolOffset: [0, 8],
      z: 12,
      itemStyle: {
        normal: {
          color: function (params) {
            const { dataIndex } = params;
            if (dataIndex % 2 === 0) {
              return 'transparent';
            }
            const { expect, reality } = dataList[Math.floor(dataIndex / 2)];
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: reality > expect ? 'rgba(89,211,255,1)' : 'red',
              },
              {
                offset: 1,
                color: reality > expect ? 'rgba(23,237,194,1)' : 'red',
              },
            ]);
          },
        },
      },
      data: bottomCircle,
    },
    // 中间圆片
    {
      name: '',
      type: 'pictorialBar',
      barWidth: '100%',
      label: {
        show: true,
        position: 'top',
        distance: -8,
        formatter: function (data, index) {
          const { value, dataIndex } = data;
          if (dataIndex % 2 === 0) {
            return '';
          }
          return [
            ' {c|负增长}',
            '',
            '',
            ` {a|+${value}%}`,
            `{a|(+${value}%)}`,
          ].join('\n');
        },
        rich: {
          a: {
            color: '#fff',
            lineHeight: 15,
          },
          c: {
            color: 'red',
            lineHeight: 15,
            marginBottom: 20,
          },
        },
      },
      itemStyle: {
        normal: {
          color: 'transparent',
        },
      },
      z: 12,
      data: middleCircle,
    },
    //上部立体柱
    {
      //上部立体柱
      stack: '1',
      type: 'bar',
      itemStyle: {
        normal: {
          color: function (params) {
            const { dataIndex } = params;
            if (dataIndex % 2 === 0) {
              return 'transparent';
            }
            return '#3E8BE6';
            const { expect, reality } = dataList[dataIndex % 5];
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: reality > expect ? 'rgba(89,211,255,1)' : 'red',
              },
              {
                offset: 1,
                color: reality > expect ? 'rgba(23,237,194,1)' : 'red',
              },
            ]);
          },
        },
      },
      label: {
        show: false,
        position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
        distance: 20,
        color: '#FFFE00',
        fontSize: 30,
        formatter: function (item) {
          var a = 100;
          return a - item.value + '%';
        },
      },
      silent: true,
      barWidth: '100%',
      data: upBar,
    },
    {
      name: '比例',
      type: 'line',
      xAxisIndex: 1,
      symbol: 'dot',
      symbolSize: 0,
      itemStyle: {
        shadowColor: '#fff',
        shadowBlur: 5,
        color: '#fff',
      },
      label: {
        show: false,
        position: 'right',
        offset: [0, '50%'],
        color: '#fff',
        formatter: function (data, index) {
          const { value, dataIndex } = data;
          if (dataIndex % 2 === 0) {
            return '';
          }
          return [`{a|+${value}%}`, `{a|-${value}%}`].join('\n');
        },
        rich: {
          a: {
            color: 'red',
            lineHeight: 10,
          },
        },
      },
      data: [0, 10, 10, 15, 15, 10, 10, 15, 15, 10, 10, 0],
    },
  ],
};

export default option;
